<template>
	<view class=" big-box">
		<top-navigation :isBack="true" bgColor="rgb(22, 22, 30)" isFix isShow>
			<view slot='center-slot' class="left-slot">
				<x-btn @tap="upload">上传分数</x-btn>
			</view>
		</top-navigation>
		<view class="content">
			<view @tap="getCall(v)" class="content-box justify-start align-center game-box-border"
				v-for="v,k in crystalList">
				<view class="top-icon-box justify-center align-center">
					{{k+1}}
				</view>

				<image class="avatar" :src="imgHost+v.avatar" mode=""></image>
				<view class="r-call-info">
					<view class="acea-row justify-start align-center">
						<view class="call-name">
							{{v.user_id}}
						</view>

					</view>
					<view class="contact-infos justify-start">
						<view class=" justify-start align-center">
							<view class="line1">
								分数:{{v.score}}
							</view>

						</view>

					</view>
				</view>
				<!-- <view class="shuijing-num justify-start align-center">
					<image class="kuangshi" src="/static/images/starmap/shuijingb.png" mode=""></image>
					{{v.crystal>10000?'10000+':v.crystal}}
				</view> -->
			</view>
		</view>
		<view class="my-rank">
			<view class="my-info justify-between align-center">
				<view class="justify-start align-center">
					{{user.user_id}}
				</view>
				<text class="rank">{{user.score}}</text>
			</view>
		</view>
		<view class="popup flex-col justify-between align-center" v-if="confirmShow">
			<view class="LcdD" style="font-size: 50rpx;">
				上传你的分数为:{{score}}
			</view>
			<view class="border">
				<input type="text" placeholder="请输入昵称(用户名)" v-model="user_id" />
			</view>
			<view class="border">
				<input type="text" placeholder="请输入密码" v-model="parss" />
			</view>
			<view class="justify-between" style="width: 100%;">
				<x-btn @tap="uploadScore">上传</x-btn>
				<x-btn @tap="confirmShow=false">关闭</x-btn>
			</view>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database();
	export default {
		data() {
			return {
				score: 0,
				confirmShow: false,
				info: {},
				user: {},
				crystalList: [],
				moneyShow: false,
				parss:'',
				user_id: ''
			};
		},

		async onLoad(option) {
			this.getList()
			this.myScore()
			let that = this
			const value = uni.getStorageSync('goldCoins');
			const value1 = uni.getStorageSync('parss');
			const value2 = uni.getStorageSync('user_id');
			if (value) {
				this.score = +value
			}
			if (value1) {
				this.parss = value1
			}
			if (value2) {
				this.user_id = value2
			}
// notice
		},
		onShow() {
			// uni.showModal({
			// 	content:'还没有注册',
			// 	cancelText:'取消',
			// 	confirmText:'注册',
			// 	success(res) {
			// 		if(res.confirm){
			// 			uni.navigateTo({
			// 				url:'/uni_modules/uni-id-pages/pages/register/register'
			// 			})
			// 		}
			// 	}
			// })
		},
		onReady() {
			// this.getStatic()
		},
		methods: {
			async getList() {
				uni.showLoading({
					title: '加载中'
				})
				const res = await db.collection('rank').limit(10)
					.orderBy('score', 'desc') // 按照score字段降序排序
					.get()
				this.crystalList = res.result.data.sort((a, b) => parseFloat(b.score) - parseFloat(a.score))
				uni.hideLoading()
			},
			async myScore() {
				const user = uni.getStorageSync('user_id')
				const parss = uni.getStorageSync('parss')
				if(user&&parss){
					const res = await db.collection('rank').limit(1).where({
							user_id: user,
							parss: parss,
						})
						.get()
						this.user = res.result.data
				}
				
			},
			async uploadScore() {
				uni.setStorageSync('user_id', this.user_id)
				uni.setStorageSync('parss', this.parss)
				let res = await db.collection('rank').where({
				  user_id: this.user_id,
				  parss: this.parss,
				}).get()
				console.log('查找结果',res.result.data);
				uni.setStorageSync('user_id',this.user_id)
				uni.setStorageSync('parss',this.parss)
				if(res.result.data.length==0){
					db.collection('rank').add({
						user_id: this.user_id,
						parss: this.parss,
						score: +this.score
					}).then(res => {
						this.confirmShow = false
						this.getList()
					})
				}else{
					console.log('res.result.data[0]._id',res.result.data[0]._id);
					await db.collection('rank').doc(res.result.data[0]._id).update({
					  score: +this.score
					}).then(e => {
						this.confirmShow = false
						this.getList()
					})
				}
				return
				
			},
			upload() {
				this.confirmShow = true
			},
			// getCall联系方式弹唱
			getCall(item) {
				this.info = item
				this.moneyShow = true
			},
			myCopy(value, wxorqq) {
				let _this = this
				//提示模板
				uni.setClipboardData({
					data: value, //要被复制的内容
					showToast: false,
					success: () => { //复制成功的回调函数
						_this.$refs.uToast.show({
							message: '已复制',
							type: 'default',
							duration: '500'

						})
						// uni.showToast({ //提示
						// 	title: wxorqq == 'w' ? "微信号已复制" : 'QQ号已复制'
						// })
					}
				});
			},
			async getStatic() {


			},

		}
	};
</script>



<style lang="scss" scoped>
	.game-box-border {
		box-shadow: 0 0 0 1px #F3E0BC;
		border-radius: 20rpx;
	}

	.big-box {
		width: 100vw;
		background: #16161e;
		min-height: 100vh;

		.popup {
			padding: 50rpx;
			border-radius: 20rpx;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 700rpx;
			height: 500rpx;
			background-color: #FFF;
			z-index: 100;
			color: #000;
		}

		.my-rank {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			max-width: 23.4375rem;
			height: 4.75rem;
			background-color: #20202c;
			padding: .9375rem 2rem 0 1.4375rem;
			z-index: 10;

			.my-info {
				color: rgba(255, 255, 255, .8);
				font-size: .875rem;
				line-height: 1.25rem;
			}

			.rank {
				text-align: right;
				flex: 1;
				color: rgba(255, 255, 255, .4);
				font-size: .75rem;
			}

			.user-ava {
				width: 80rpx;
				height: 80rpx;
				border-radius: 8rpx;
				margin-right: 24rpx;
			}
		}

		.left-slot {
			color: #FFF;
			font-size: 16px;
			font-weight: 500;
		}

		.content {
			color: #D0D1D3;
			padding: 26rpx 50rpx 150rpx 32rpx;

			.content-box {
				margin-bottom: 40rpx;

				.shuijing-num {
					font-size: .875rem;
					height: 1.375rem;
					text-align: left;
					font-weight: 700;
					color: #FFF;
				}

				.kuangshi {
					width: 64rpx;
					height: 41rpx;
					margin-right: 8rpx;
				}

				.top-icon-box {
					margin-right: 32rpx;
					width: 36rpx;
					height: 36rpx;
				}

				.top-icon {
					width: 36rpx;
					height: 36rpx;
				}

				.r-call-info {
					flex: 1;
				}

				.contact-infos {
					color: rgba(255, 255, 255, .4);

					.wx-qq-icon {
						width: 30rpx;
						margin-right: 8rpx;
					}

					.qqinfo {
						margin-left: 32rpx;
					}

					.line1 {
						font-size: 24rpx;
						color: rgba(255, 255, 255, .4);
						line-height: 1.125rem;


					}

					.infobox {
						border-radius: 8rpx;
						background-color: #20202c;
						padding: 0rpx 8rpx;
						font-size: 24rpx;
						flex-wrap: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

						.line2 {
							font-size: 20rpx;
							color: rgba(255, 255, 255, .4);
							line-height: 1.125rem;

							.jiantou {
								width: 24rpx;
								height: 24rpx;
							}
						}
					}
				}
			}

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 4rpx;
				margin-right: 24rpx;
			}

			.acea-row {
				.call-name {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-bottom: 8rpx;

					font-weight: 700;
					font-size: .875rem;
					line-height: 1.1875rem;
					color: rgba(255, 255, 255, .8);
				}

				.call-id {
					flex: 1;
					text-align: right;
					color: rgba(255, 255, 255, .4);
					font-size: .75rem;
					line-height: 1.125rem;
				}

				.level {
					width: 114rpx;
					margin: 0 10rpx;
				}
			}
		}
	}

	.popup-one-box {
		position: relative;
		z-index: 7;
		width: 560rpx;
		border-radius: 16rpx;
		background: #1D1D1D;
		padding: 90rpx 40rpx 48rpx;



		.shui-ji-num {
			font-size: 28rpx;
			color: #FFF;
			font-weight: 700;
		}

		.popup-box-btn {
			margin-top: 8rpx;
			width: 480rpx;
			font-size: 24rpx;
			border-radius: 8rpx;
			color: rgba(255, 255, 255, .4);

			.right {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.popup-box-cancel {
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
			bottom: -120rpx;
		}

		.close-popup {
			width: 48rpx;
			height: 48rpx;
		}

		.popup-kuangshi {
			width: 48rpx;
			height: 48rpx;
		}

		.need-kuang {
			width: 480rpx;
			height: 84rpx;
			background: #292838;
			border-radius: 8rpx;
			padding: 0 28rpx;
			margin-bottom: 24rpx;

			.need-shuijing {
				flex: 1;
				font-size: 22rpx;
				text-align: center;
				color: rgba(255, 255, 255, .8);
			}

			.need-shuijing-num {
				font-size: 28rpx;
				font-weight: 700;
				color: #FFF;
			}
		}

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 4rpx;
			margin-right: 24rpx;
		}

		.acea-row {
			margin-bottom: 42rpx;

			.call-name {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-top: 14rpx;

				font-weight: 700;
				font-size: .875rem;
				line-height: 1.1875rem;
				width: 7.5rem;
				color: rgba(255, 255, 255, .8);
			}

			.call-id {
				margin-top: 24rpx;
				flex: 1;
				text-align: left;
				color: rgba(255, 255, 255, .4);
				font-size: .75rem;
				line-height: 1.125rem;
			}

			.level {
				width: 114rpx;
				margin: 0 10rpx;
			}
		}


	}
</style>